<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09_jQuery-和原生对象的转换</title>
  </head>
  <body>
    <ul>
      <li class="li-1">li-1</li>
      <li class="li-2">li-2</li>
      <li class="li-3">li-3</li>
      <li class="li-4">li-4</li>
      <li class="li-5">li-5</li>
    </ul>

    <script src="../libs/jquery-3.6.0.js"></script>
    <script>
      // 1. jQuery对象转换成DOM Element对象
      const $ul = $("ul");
      console.log($ul);
      // 1.1
      const ulEl = $ul[0];
      console.log("%O", ulEl);
      // 1.2
      // console.log($ul.get()) // 获取到匹配元素集合中所有的元素 [ul]
      const ulEl2 = $ul.get(0);
      console.log("%O", ulEl2);

      // 2. DOM Element对象转换成jQuery对象
      const liEl = document.querySelector("li");
      console.log("%O", liEl);
      const $li = $(liEl);
      console.log("%O", $li);
    </script>
  </body>
</html>
